<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script type="text/javascript"> 
 
    var stompClient = null;  
 
    function setConnected(connected) {  
        document.getElementById('connect').disabled = connected;  
        document.getElementById('disconnect').disabled = !connected;  
        document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';  
        document.getElementById('response').innerHTML = '';  
    }
 	
	/**
 	* 建立webshocket连接
 	*/
    function connect() {
		
		// 定义客户端的认证信息,按需求配置
        let headers = {
			login: 'mylogin',
		  	passcode: 'mypasscode',
		  	// additional header
  			'client-id': 'my-client-id',
            Authorization:''
        }
	
		// 建立连接对象（还未发起连接）
        var socket = new SockJS('http://localhost:8080/chat');//连接服务端的端点，连接以后才可以订阅广播消息和个人消息 
		// 获取 STOMP 子协议的客户端对象        
		stompClient = Stomp.over(socket);
		// 向服务器发起websocket连接并发送CONNECT帧
        stompClient.connect({}, function(frame) {  
			// 连接成功时（服务器响应 CONNECTED 帧）的回调方法
            setConnected(true);  
            console.log('Connected: ' + frame); 
            //订阅广播消息
            stompClient.subscribe('/topic/echoTest/price', function(msg){
				// msg.body存放的是服务端发送给我们的信息                
				showGreeting(msg.body);
				
			stompClient.send("/app/chat",//注意：路径/app为WebSocketConfig 配置信息中的前缀app,/chat为@MessageMapping("/chat")
                    headers,
                    JSON.stringify({sender: 'admin',chatType: 'JOIN'})
			); //用户加入接口
            }, function errorCallBack(error) {
				// 连接失败时（服务器响应 ERROR 帧）的回调方法
			});
			
			
			//
		stompClient.subscribe('/queue/notice', function(msg){  
				// msg.body存放的是服务端发送给我们的信息                
				showGreeting(msg.body);
		});//end /queue/notice
        });  
    }
 
    function disconnect() {  
        if (stompClient != null) {  
            stompClient.disconnect();  
            setConnected(false);  
            console.log("Disconnected");  
        }  
    }  
 
    function showGreeting(message) {  
        var response = document.getElementById('response');  
        var p = document.createElement('p');  
        p.style.wordWrap = 'break-word';  
        p.appendChild(document.createTextNode(message));  
        response.appendChild(p);  
    }
 
</script>
</head>
<body class="easyui-layout">
    <div>  
        <div>  
            <button id="connect" onclick="connect();">Connect</button>  
            <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>  
        </div>  
        <div id="conversationDiv">  
            <p id="response" style="border: black;width: 500px;border-style: dashed;"></p>  
        </div>  
    </div> 
 
 
</body>
</html>